<template>
  <div class="flex-1 flex flex-col bg-white overflow-hidden">
    <!-- 聊天区域 -->
    <div class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6" id="chatArea">
      <div v-if="messages.length === 0" class="flex items-center justify-center h-full">
        <div class="text-center py-12">
          <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-comments text-white text-2xl"></i>
          </div>
          <h3 class="text-xl font-semibold text-slate-800 mb-2">开始新的对话</h3>
          <p class="text-slate-600">请输入您的问题，我将为您提供专业的回答</p>
        </div>
      </div>

      <!-- 消息列表 -->
      <div v-else class="space-y-6">
        <div v-for="message in messages" :key="message.id" class="chat-message">
          <!-- 用户消息 -->
          <div v-if="message.role === 'user'" class="flex justify-end">
            <div class="flex items-start space-x-3 max-w-[80%]">
              <div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl rounded-br-sm p-4 shadow-lg">
                <p class="text-white text-sm leading-relaxed">{{ message.content }}</p>
                <div class="timestamp user-timestamp text-blue-200 mt-2 text-xs">{{ formatTime(message.created_at) }}</div>
              </div>
              <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center shadow-md">
                <span class="text-white text-sm">U</span>
              </div>
            </div>
          </div>
          
          <!-- 机器人消息 -->
          <div v-else class="flex justify-start">
            <div class="flex items-start space-x-3 max-w-[92%]">
              <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center shadow-md">
                <i class="fas fa-robot text-white text-sm"></i>
              </div>
              <div class="glass-effect rounded-2xl p-6 shadow-xl border border-slate-200">
                <div class="mb-4">
                  <p class="text-slate-700 text-sm leading-relaxed mb-3">
                    我正在处理您的问题："{{ message.content }}"
                  </p>
                  <div class="timestamp text-xs text-slate-500">{{ formatTime(message.created_at) }}</div>
                </div>
                
                <!-- 进度条 -->
                <div class="mb-6">
                  <div class="flex justify-between text-xs text-slate-500 mb-2">
                    <span>处理进度</span>
                    <span>{{ progress }}%</span>
                  </div>
                  <div class="w-full bg-slate-200 rounded-full h-2">
                    <div class="progress-bar" :style="{ width: progress + '%' }"></div>
                  </div>
                </div>
                
                <!-- Todo List -->
                <div class="space-y-3">
                  <div 
                    v-for="task in processingTasks" 
                    :key="task.id"
                    class="todo-item processing-node p-4 rounded-xl border-2 bg-white cursor-pointer"
                    :class="getTaskClasses(task)"
                    :data-step="task.id"
                    :data-task="task.id"
                    @click="$emit('task-click', task)"
                  >
                    <div class="flex items-center justify-between">
                      <div class="flex items-center space-x-3">
                        <div class="w-6 h-6 rounded-full flex items-center justify-center" :class="getTaskIconClasses(task)">
                          <i v-if="task.status === 'processing'" class="loading-dots">
                            <span></span>
                            <span></span>
                            <span></span>
                          </i>
                          <i v-else :class="getTaskIcon(task)" class="text-white text-xs"></i>
                        </div>
                        <div>
                          <p class="font-medium text-slate-800">{{ task.title }}</p>
                          <p class="text-xs text-slate-500 mt-1">{{ task.description }}</p>
                        </div>
                      </div>
                      <span class="text-xs font-medium" :class="getTaskStatusClasses(task)">
                        {{ getTaskStatus(task) }}
                      </span>
                    </div>
                    <div class="task-details" :class="{ 'show': task.showDetails }">
                      <h4>{{ getTaskDetailTitle(task) }}</h4>
                      <ul>
                        <li v-for="(item, index) in getTaskDetailItems(task)" :key="index">{{ item }}</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { formatTime } from '../../utils/home'
import { 
  getTaskIcon, 
  getTaskIconClasses, 
  getTaskStatus, 
  getTaskStatusClasses, 
  getTaskClasses, 
  getTaskDetailItems,
  getTaskDetailTitle 
} from '../../utils/home'
import type { Message, ProcessingTask } from '../../types/home'

interface Props {
  messages: Message[]
  processingTasks: ProcessingTask[]
  progress: number
}

interface Emits {
  (e: 'task-click', task: ProcessingTask): void
}

defineProps<Props>()
defineEmits<Emits>()
</script>

<style scoped>
/* 玻璃态效果 */
.glass-effect {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 时间戳样式 */
.timestamp {
  font-size: 0.75rem;
  opacity: 0.7;
}

.user-timestamp {
  text-align: right;
}

/* 进度条 */
.progress-bar {
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* 处理节点动画 */
.processing-node {
  transition: all 0.3s ease;
  animation: todoFadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.processing-node:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.processing-node.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.processing-node.completed-task {
  border-left: 3px solid #10b981 !important;
  cursor: pointer;
}

.processing-node.completed-task:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

@keyframes todoFadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 任务详情样式 */
.task-details {
  margin-top: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border-left: 3px solid #e2e8f0;
  font-size: 12px;
  line-height: 1.5;
  color: #475569;
  display: none;
}

.task-details.show {
  display: block;
  animation: slideDown 0.3s ease-out;
}

.task-details h4 {
  font-weight: 600;
  margin-bottom: 8px;
  color: #1f2937;
}

.task-details ul {
  list-style: none;
  padding: 0;
}

.task-details li {
  margin-bottom: 4px;
  padding-left: 20px;
  position: relative;
}

.task-details li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: bold;
}

/* 活跃状态下的任务详情边框颜色 */
.processing-node.active .task-details {
  border-left-color: #667eea;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 200px;
  }
}

/* 加载动画 */
.loading-dots {
  display: flex;
  gap: 2px;
}

.loading-dots span {
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  animation: loadingDots 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loadingDots {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 自定义滚动条 */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  display: block;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
  display: block;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
  display: block;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
  display: block;
}
</style>